<template>
  <div class="b-right">
    <div></div>
    <div></div>
    <dv-border-box-8 v-for="item in sortList" :key="item.TankCode" :dur="15">
      <oil-tank :oilData="item"></oil-tank>
    </dv-border-box-8>
  </div>
</template>
<script>
import OilTank from "./oilTank.vue"
export default {
  components: {
    OilTank,
  },
  data() {
    return {
      dataList: [],
    }
  },
  mounted() {
    this.getShiYongTankStatus()
  },
  computed: {
    sortList() {
      const list = [
        "14#",
        "13#",
        "6#",
        "3#",
        "9#",
        "12#",
        "5#",
        "2#",
        "8#",
        "11#",
        "4#",
        "1#",
        "7#",
        "10#",
      ]
      return list.map((e) => {
        const item = this.dataList.find((n) => n.TankCode == e)
        if (item) {
          return item
        }
      })
    },
  },
  methods: {
    async getShiYongTankStatus() {
      const res = await this.$store.dispatch("GetShiYongTankStatus")
      this.dataList = res
      //   if (res) {
      //     console.log(res)
      //   }
      setTimeout(() => {
        this.getShiYongTankStatus()
      }, 60000 * 3)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";
</style>
